<template>
  <frame-view class="index" nav-bar-bg-color="#fff">

      <div class="list">
        <div class="row"
             style="border-color: #cecece;padding-top: 0;display: flex;justify-content: space-between;align-items: center"
             v-for="(v,i) in list" :key="i">
          <img src="./image/gouxuan@2x.png" v-if="current===i" style="width: 38px;height: 38px;" />
          <div :style="{marginTop:'24px',width:current===i?'542px':'616px'}" @click="current=i">
            <div class="flex-y-c uni-mb-4">
              <div class="t-gray t-mid uni-mr-4 " style="font-size: 28px">{{ v.name }}<span style="font-weight: 300">135****7788</span>
              </div>
              <div v-if="v.isDefault"
                   style="display: inline-block;width: 48px;height: 26px;background: var(--primary-color);border-radius: 4px;font-size: 20px;color: #FFFFFF;text-align: center;margin-left: 16px">
                默认
              </div>
            </div>
            <div class="f-13 t-gray" style="margin-top: 24px;font-size: 26px;">{{ v.loc }}{{ v.address }}</div>
          </div>
          <img src="./image/icon_edit.png" style="width: 42px;height: 42px;" />

        </div>
      </div>
    <div style="margin-left:32px;position: fixed;bottom: 20px;" @click="getPage('/my/editAddress')">
      <van-button round block type="info" style="width: 686px;height: 80px;" native-type="submit">添加地址</van-button>
    </div>

    <van-empty :image="emptyImage" description="暂无数据"></van-empty>

  </frame-view>

</template>

<script>

export default {
  data() {
    return {
      bottom: 0,
      currentDefault: 0,
      current: 0,
      emptyImage: require('./image/empty.png'),
      // list:[
      //   {
      //     name: '王晓霞',
      //     mobile: '135****7788',
      //     loc: '北京市大兴区亦庄经济开发区',
      //     address: '创客十一街京东集团总部B座12层',
      //     isDefault: true
      //   },
      //   {
      //     name: '王晓霞',
      //     mobile: '135****7788',
      //     loc: '北京市大兴区亦庄经济开发区',
      //     address: '创客十一街京东集团总部B座12层',
      //     isDefault: false
      //   },
      //   {
      //     name: '王晓霞',
      //     mobile: '135****7788',
      //     loc: '北京市大兴区亦庄经济开发区',
      //     address: '创客十一街京东集团总部B座12层',
      //     isDefault: false
      //   }
      // ]
      list: []
    };
  },
  // onLoad() {
  // 	let res = uni.getSystemInfoSync()
  // 	this.bottom = res.safeAreaInsets.bootom * 2 + 'px'
  // },
  methods: {
    getPage(url) {
      this.$router.push(url);
    }
  }
};
</script>

<style scoped lang="scss">
.list {
  padding: 20px 28px 20px 36px;
}
.index {
  background-color: #fff !important;
}

.row {
  padding-top: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #BFBFBF;
}

.foot {
  border-top: 1px solid #F5F5F5;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112px;
}

.btn {
  width: 686px;
  height: 80px;
  border-radius: 40px;
  background-color: #4569F8;
  margin: auto;
  display: flex;
  text-align: center;
}

:deep(.frame-view-content) {
  padding: 0 !important;
}

.index {
  background-color: #f7f7f7;
}
</style>
